<template>
    <el-dialog v-model="visible" :title="title" @close="cancel" width="35%">
    
    
        <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px">
        <el-form-item label="平台名称" prop="name">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
    
        <el-form-item label="二维码地址" prop="qrCodes" class="custom-label-width">
             <el-upload
                    v-model:file-list="dataForm.qrCodes"
					:action="constant.xuanfuurl"
					:headers="{ Authorization: cache.getToken() }"
					:before-upload="beforeUpload"
					:on-success="handleSuccess"
					:show-file-list="false"
				>
                <el-button v-auth="'sys:attachment:save'" icon="Plus" type="primary" >上传</el-button>
				</el-upload>
        </el-form-item>

      
        <!-- <p>{{  adxiuCodes }}</p> -->
      <el-image
     v-if="adxiuCodes"
          style="width: 100px; height: 100px;margin-left: 7rem"
          :src="adxiuCodes"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          />
        


        <el-form-item label="平台图标地址" prop="icons">
            <el-upload
                    v-model:file-list="dataForm.icons"
					:action="constant.xuanfuurl"
					:headers="{ Authorization: cache.getToken() }"
					:before-upload="beforeUpload"
					:on-success="handleSuccess"
					:show-file-list="false"
				>
					<el-button v-auth="'sys:attachment:save'" icon="Plus" type="primary">上传</el-button>
				</el-upload>
        </el-form-item>

     
	   
      <!-- <p>{{  adxiuicon }}</p> -->
      <el-image
         v-if="adxiuicon"
          style="width: 100px; height: 100px;margin-left: 7rem"
          :src="adxiuicon"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          />
        
    <el-form-item label="平台地址" prop="path">
          <el-input v-model="dataForm.path"></el-input>
        </el-form-item>
        <el-form-item label="创建人" prop="creator">
          <el-input v-model="dataForm.creator"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-input v-model="dataForm.createTime"></el-input>
        </el-form-item>
        <el-form-item label="修改人" prop="updater">
          <el-input v-model="dataForm.updater"></el-input>
        </el-form-item>
        <el-form-item label="修改时间" prop="updateTime">
          <el-input v-model="dataForm.updateTime"></el-input>
        </el-form-item>
  
      </el-form>
      <template #footer>
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="submit()">确定</el-button>
      </template>
    </el-dialog>
 

  </template>
  
  <script setup lang="ts">
  import cache from '@/utils/cache'
  import { reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus/es'
  import { useCrud } from '@/hooks'
  import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
  import constant from '@/utils/constant'
  import type { UploadFile } from 'element-plus'
  import { addPColumn, addSColumn, editPColumn, editSColumn ,sandedit,sanchuan} from '@/api/allApi'
  import { v } from 'vxe-table'
  import type { UploadProps, UploadUserFile } from 'element-plus'
import { el } from 'element-plus/es/locale'
  const emit = defineEmits(['resetList'])
  
  const visible = ref(false)
  const title = ref('新增根栏目')
  const dialogType = ref('addP')
  const dataFormRef = ref()
  const dataForm = reactive({
    id: '',
    name: '',
    icons: "",
    qrCodes: '',
    path: '',
    creator: '',
    createTime: '',
    updater: '',
    updateTime: '',
  })

  const id = ref('')
  const names = ref('')
  const icon = ref('')  
  const qrCodes = ref('')
  const paths = ref('')

  const iconSrc  = ref("")


  const handleSuccess: UploadProps['onSuccess'] = (res, file) => {
	if (res.code !== 0) {
		ElMessage.error('上传失败：' + res.msg)
		return false
	}

	Object.assign(dataForm, res.data)

}

const beforeUpload: UploadProps['beforeUpload'] = file => {
	if (file.size / 1024 / 1024 / 100 > 1) {
		ElMessage.error('文件大小不能超过100M')
		return false
	}
	return true
}

const adxiuicon = ref("")

const adxiuCodes  = ref("")

// 回显数据
        const init = (type: string, row: any) => {
            
            console.log(row,'ziyemian')
     
              // 检查row是否存在
                if (row && row.icon) {
                  console.log(row,"rrrrrrrrr");
                  
                    const xiuicon = row.icon;
                           // 真数据
                    // adxiuicon.value = xiuicon
                 // 死数据
                    adxiuicon.value = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg';  
                } else {
                    console.error('row is undefined or row.icon is missing');
                }
            
                if (row && row.qrCode) {
                    const xiuqrCodes = row.qrCode;
                 // 真数据
                    // adxiuCodes.value = xiuqrCodes
              // 死数据
                    adxiuCodes.value = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg';  
                } else {
                    console.error('row is undefined or row.qrCode is missing');
                }
                        Object.assign(dataForm, row);
                        // 显示对话框
                        visible.value = true;

        }


// 新增数据  修改数据

        const dataRules = reactive({})
        const rowDate = reactive({})
        
        let lastSubmitTime = 0; // 上一次提交的时间戳
        const SUBMIT_COOLDOWN_TIME = 3 * 60 * 1000; // 3分钟的毫秒数

        const submit = () => {
            const currentTime = Date.now(); // 当前时间戳

            // // 检查是否在冷却时间内
            if (currentTime - lastSubmitTime < SUBMIT_COOLDOWN_TIME) {
                ElMessage.warning('请在3分钟后再试一次');
                return;
            }
   
            id.value = dataForm.id;
            names.value = dataForm.name;
            paths.value = dataForm.path;
            // qrCodes.value = dataForm.qrCodes.map((qrCode: { response: { data: { href: any } } }) => qrCode.response.data.href).join(', ');
            // icon.value = dataForm.icons.map((icons: { response: { data: { href: any } } }) => icons.response.data.href).join(', ');
       
            if(dataForm.qrCodes=== ''){
              qrCodes.value = dataForm.qrCodes
            }else{
              qrCodes.value = dataForm.qrCodes.map((qrCode: { response: { data: { href: any } } }) => qrCode.response.data.href).join(', ')
            }


            if(dataForm.icons===''){
              icon.value = dataForm.icons
            }else{
              icon.value = dataForm.icons.map((icons: { response: { data: { href: any } } }) => icons.response.data.href).join(', ')
            }


            console.log(qrCodes.value,'q')
            console.log(icon.value,'icon')

            if (dataForm.id === '') {
                console.log("id为空,新增");
                sandedit({
                    name: names.value,
                    icon: icon.value,
                    qrCode: qrCodes.value ,
                    path: paths.value,
                }).then((res: any) => {
                    console.log(res, 'res');
                    lastSubmitTime = currentTime; // 更新提交时间
                    setTimeout(function() {
                        location.reload();
                    }, 1000); // 
                    ElMessage.success('添加操作成功');
                    visible.value = false;
                }).catch((err: any) => {
                    ElMessage.error(err.message);
                });
            } else {
                console.log("id不为空,修改");
                sandedit({
                    id: id.value,
                    name: names.value,
                    icon: icon.value,
                    qrCode: qrCodes.value,
                    path: paths.value,
                }).then((res: any) => {
                    console.log(res, 'res');
                    lastSubmitTime = currentTime; // 更新提交时间
                    setTimeout(function() {
                        location.reload();
                    }, 1000); 
                    ElMessage.success('修改操作成功');
                    visible.value = false;
                    emit('resetList');
                }).catch((err: any) => {
                    ElMessage.error(err.message);
                });
            }
        }



  const cancel = () => {

    
      visible.value = false
      dataForm.id = '';
      dataForm.name = '';
      dataForm.icons = '';
      dataForm.qrCodes = '';
      dataForm.path = '';
      dataForm.creator = '';
      dataForm.createTime = '';
      dataForm.updater = '';
      dataForm.updateTime = '';
 
      adxiuicon.value=''
      adxiuCodes.value = ''
      dataFormRef.value.resetFields()
  }
  
  defineExpose({
      init
  })
  </script>
  
  <style lang="scss" scoped>
.custom-label-width .el-form-item__label {
  width: 120px; /* 或者其他你需要的宽度 */
}


</style>
  